<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆注册</title>
    <!-- 引入css 和图标图的css  引入才可以生效 -->
    <link rel="stylesheet" href="css/userInfologin.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="container" id="container">

    <div class="form-container sing-in-container">
        <!-- 登陆 -->
        <form action="#" id="loginForm">
            <h1>用户登陆</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                <a href="#" class="social"><i class="iconfont icon-github"></i></a>
            </div>
            <span>您可以选择以上几种方式登陆您的账户!</span>
            <input type="text" id="LAY-user-login-username" name="userInfoName" placeholder="用户名" value="张三">
            <input type="password" id="LAY-user-login-password" name="userInfoPwd" placeholder="密码" value="987654">
            <a href="#">忘记密码?</a>
            <input type="button" id="loginBtn" value="登陆">
        </form>
    </div>

    <div class="form-container sign-up-container">
        <!-- 注册 -->
        <form action="#" id="loginSer">
            <h1>用户注册</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="iconfont icon-qq"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
                <a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
                <a href="#" class="social"><i class="iconfont icon-github"></i></a>
            </div>
            <span id="span">您可以选择以上几种方式注册一个您的账户!</span>
            <input type="text" name="userInfoName" placeholder="用户名" id="userInfoName">
            <input type="password" name="userInfoPwd" placeholder="密码" id="userInfoPwd">
            <input type="password" name="passwords" placeholder="确定密码" id="passwords">
            <input type="submit"  id="register" value="注册">
        </form>
    </div>
    <!-- 侧边栏内容 -->
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-pannel overlay-left">
                <h1>已有账号?</h1>
                <p>亲爱的快快点我去进行登陆吧。</p>
                <button class="ghost" id="signIn">登陆</button>
            </div>
            <div class="overlay-pannel overlay-right">
                <h1>没有帐号？</h1>
                <p>点击注册去注册一个属于你的账号吧。</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/userInfologin.js"></script>
</html>
<script>
    // 第一：使用 layui 的组件
    layui.use(['layer', 'jquery'], function () {
        // 第二：获取组件的实例对象
        var layer = layui.layer;
        var $ = layui.jquery;

        // 绑定登录按钮
        $('#loginBtn').on('click', function () {
            login();
        });

        // 登陆
        function login() {
            if ($("#LAY-user-login-username").val() == '') {
                layer.msg("请输入用户名");
                return false;
            }
            if ($("#LAY-user-login-password").val() == ''){
                layer.msg("请输入密码");
                return false;
            }
            var params = $("#loginForm").serialize();
            $.ajax({
                url: '../userInfo/login',
                type: 'post',
                data: params,
                success: function ( res ) {
                    // 登录成功
                    if (res.code == 200) {
                        // 1.获取登录的用户
                        let userInfo = res.data ;
                        // 2.把登录用户存储到 sessionStorage
                        sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
                        // 3.页面跳转
                        // 登录页面或者之后的某个页面检查sessionStorage中的redirectUrl
                        if (sessionStorage.getItem('redirectUrl')) {
                            const redirectUrl = sessionStorage.getItem('redirectUrl');
                            // 清除sessionStorage中的redirectUrl
                            sessionStorage.removeItem('redirectUrl');
                            // 重定向回原页面
                            window.location.href = redirectUrl;
                        }else {
                            //没有保存页面就跳到主页面
                            window.location.href = './worry.html';
                        }
                        return userInfo;
                    }
                    // 登录失败，弹出错误消息
                    layer.msg(res.msg);
                }
            });
        }


        //注册
        // 绑定注册按钮
        $('#register').on('click', function () {
            register();
        });

        // 注册
        function register() {
            if ($("#userInfoName").val() == '' || $("#userInfoPwd").val() == '' || $('#passwords').val() =='') {
                layer.msg("请输入用户名或密码");
                return false;
            }
            if ($('#userInfoPwd').val() != $('#passwords').val()){
                layer.msg("密码与确定密码不一样");
                return false;
            }
            var params = $("#loginSer").serialize();
            $.ajax({
                url: '../userInfo/getAddUserInfo',
                type: 'post',
                data: params,
                success: function ( res ) {

                    // 注册成功
                    if (res.code == 200) {
                        // 1.获取注册的用户
                        let name = res.data ;
                        let password = res.data;

                        // 2.把登录用户存储到 sessionStorage
                        sessionStorage.setItem("userInfoName",JSON.stringify(name));
                        sessionStorage.setItem("userInfoPwd".JSON.stringify(password));

                        let user = res.data ;

                        // 3.页面跳转
                        location.href = "worry.html";
                        return user;
                    }

                    // 注册失败，弹出错误消息
                    layer.msg(res.msg);
                }
            });
        }
    });
</script>